<template>
    <div class="select-box text-normal grey-color">
        <div class="select" :class="{ 'primary-color bor-bottom': filterType === 'sort'}" @click="onClickFilterType('sort')">
            <span class="text">{{sortName ? sortName : '排序'}}</span>
            <span class="icon" :class="{ 'invert primary-color': filterType === 'sort'}">&#xeb6d;</span>
        </div>
        <div class="select" :class="{ 'primary-color bor-bottom': filterType === 'select'}" @click="onClickFilterType('select')">
            <span :class="{'color-primary': isRangeEnable}" class="text">筛选</span>
            <span class="icon" :class="{ 'invert primary-color' : filterType === 'select'}">&#xeb6d;</span>
        </div>
        <div class="options-box text-small" v-if="filterType">

            <div class="white-bg" v-if="filterType === 'sort'">
                <div class="item clearfix" :class="{ 'primary-color': sortValue === item.val }" @click="onClickSort(item)" v-for="(item, index) in sortOptions" :key="index">
                    <div class="fl">
                        {{item.name}}
                    </div>
                    <div class="icon fr" v-if="sortValue === item.val">&#xe633;</div>
                </div>
            </div>
            <div class="white-bg text-normal" v-if="filterType === 'select'">
                <div class="title">价格</div>
                <div class="input-box text-center">
                    <input type="number" v-model="tempMin" placeholder="最低价" class="input grey-bg">
                    <span class="s-line grey-color">&nbsp;——&nbsp;</span>
                    <input type="number" v-model="tempMax" placeholder="最高价" class="input grey-bg">
                </div>
                <div class="btn-box">
                    <div @click="onClickSelectReset" class="btn btn-mobile btn-block btn-white-red red-border">重置</div>
                    <div @click="onClickSelectConfirm" class="btn btn-mobile btn-block btn-red">确定</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            /** 过滤类型 */
            filterType: '',
            /** 最低价 */
            tempMin: '',
            /** 最高价 */
            tempMax: '',
            /** 排序 */
            sortName: '',
            sortValue: '',
            /** 排序选项 */
            sortOptions: [
                {
                    val: 'multiple',
                    name: '综合排序',
                },
                {
                    val: 'createdAt',
                    name: '新上架',
                },
                {
                    val: 'priceDesc',
                    name: '价格由高到低',
                },
                {
                    val: 'priceAsc',
                    name: '价格由低到高',
                },
                {
                    val: 'visitor',
                    name: '高人气',
                },
            ],
        };
    },
    computed: {
        /** 区间是否有效 */
        isRangeValid() {
            if (this.tempMin && this.tempMax) {
                const low = Number(this.tempMin);
                const high = Number(this.tempMax);
                return !isNaN(low) && !isNaN(high) && (high > low);
            }
            return true;
        },
        /** 区间设置是否正在生效 */
        isRangeEnable() {
            return (this.tempMin && !isNaN(Number(this.tempMin))) || (this.tempMax && !isNaN(Number(this.tempMax)));
        },
    },
    methods: {
        /** 选择过滤类型 */
        onClickFilterType(type) {
            if (this.filterType === type) {
                this.filterType = '';
                return;
            }
            this.filterType = type;
        },
        /**
         * 点击排序
         */
        onClickSort(item) {
            this.$emit('sort', item);
            this.sortName = item.name;
            this.sortValue = item.val;
            this.filterType = '';
        },
        /**
         * 点击重置
         */
        onClickSelectReset() {
            this.tempMin = '';
            this.tempMax = '';
            this.$emit('range', {
                min: this.tempMin,
                max: this.tempMax,
            });
        },
        /**
         * 确认
         */
        onClickSelectConfirm() {
            if (!this.isRangeValid) {
                wx.showToast({
                    title: '请输入正确的价格区间',
                    icon: 'none',
                });
                return;
            }
            this.$emit('range', {
                min: Number(this.tempMin) > 0 ? this.tempMin * 100 : '',
                max: Number(this.tempMax) ? this.tempMax * 100 : '',
            });
            this.filterType = '';
        },
    },
};
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.select-box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    .select {
        .text {
            display: inline-block;
            padding-bottom: 10px;
            border-bottom: 2rpx solid transparent;
        }
        &.bor-bottom {
            .text {
                border-bottom: 2rpx solid @primary-color;
            }
        }
        .icon {
            display: inline-block;
            margin-left: 10rpx;
            font-size: 10px;
            transition: transform .3s;
        }
        .invert {
            transform-origin: center;
            transform: rotateZ(-180deg);
        }
    }
    .options-box {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: calc(~"100vh - 100%");
        overflow-y: scroll;
        background: rgba(0, 0, 0, 0.55);
        z-index: 1;
        .title {
            padding-left: 10px;
        }
        .input-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 25px;
            .input {
                display: inline-block;
                width: 150px;
                height: 26px;
                border-radius: 40rpx;
            }
        }
        .btn-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 25px;
            .btn {
                width: 150px;
                height: 32px;
                line-height: 32px;
                border-radius: 40rpx;
                overflow: hidden;
            }
        }
        .item {
            padding: 10px;
            &:not(:last-child) {
                border-bottom: 2rpx solid #f5f5f5;
            }
        }
    }
}
</style>
